<template>
  <div>
      <el-row>
        <el-col :span="24">
          <el-button @click="drawer = true" type="primary" size="mini">新增</el-button>
          <el-button @click="delRole" type="primary" size="mini">删除</el-button>
        </el-col>
      </el-row>
      <slot><Strong>角色信息</Strong></slot>
      <!--新增角色界面-->
      <el-drawer
        ref="roleDrawer"
        title="新增角色"
        size="50%"
        :before-close="drawerHandleClose"
        :visible.sync="drawer"
        >
        <el-form :model="roleForm" status-icon label-width="100px">
          <el-form-item label="角色编号">
            <el-input type="text" v-model="roleForm.id"></el-input>
          </el-form-item>
          <el-form-item label="角色名称">
            <el-input type="text" v-model="roleForm.text"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitRoleForm()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
      <!--角色列表显示区域-->
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        @current-change="handleCurrentChange">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="text" label="角色名称" > </el-table-column>
        <el-table-column  prop="id" label="角色编码" > </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-pagination
          small
          layout="sizes,prev, pager, next,total"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          @current-change="currentPageChange"
          @size-change="handleSizeChange"
          :total="total">
        </el-pagination>
      </div>
  </div>
</template>

<script>
  import request from "../../../../../utils/request.js";
  export default {
    data() {
      return {
        tableData: [],
        total:0,
        pageSize:5,
        curPageNum:1,
        drawer:false,
        roleForm:{
          text:"",
          id:""
        },
        queryForm:{
          text:""
        },
        currentRow:{}
      }
    },

    methods: {
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      //角色表格点击触发事件
      handleCurrentChange(val) {
        this.currentRow = val;
        this.$bus.$emit("showSelectTree",val);
      },
      //当前页变化
      currentPageChange(val){
        this.curPageNum = val;
        const that = this;
        request.post("/system/query/queryRole",{"pageSize":this.pageSize,"curPageNum":this.curPageNum}).then(function(res){
          that.tableData = res.data.list;
          that.total = res.data.total;
        });
      },
      handleSizeChange(val){
          this.pageSize = val;
      },
      //表单提交
      submitRoleForm(){
        var formData = {"id":this.roleForm.id,"text":this.roleForm.text};
        const that = this;
        request.post("/system/db/saveRole",formData).then(function(res){
          if(res.data.retCode=="201"){
            that.$Alert({showClose: true,message: res.data.message,type: 'error'});
          }else{
            that.$Alert({message: res.data.message,type: 'success'});
          }
          that.$refs.roleDrawer.closeDrawer();
        })
      },
      //抽屉关闭前执行
      drawerHandleClose(done){
        this.roleForm.id="";
        this.roleForm.text="";
        done();
      },
      //查询表格数据
      queryTable(){
        const that = this;
        request.post("/system/query/queryRole",{"pageSize":this.pageSize,"curPageNum":this.curPageNum,"text":this.queryForm.text})
                .then(function(res){
          that.tableData = res.data.list;
          that.total = res.data.total;
        });
      },
      //删除角色信息
      delRole(){
        const that = this;
        request.post("/system/db/delRole",this.currentRow)
                .then(function(res){
          if(res.data.retCode=="201"){
            that.$Alert({showClose: true,message: res.data.message,type: 'error'});
          }else{
            that.$Alert({message: res.data.message,type: 'success'});
          }
          request.post("/system/query/queryRole",{"pageSize":that.pageSize,"curPageNum":that.curPageNum,"text":that.queryForm.text})
                    .then(function(res){
              that.tableData = res.data.list;
              that.total = res.data.total;
          });      
        });
      }
      
    },
    //界面初始化执行，以及绑定事件
    mounted:function(){
      const that = this;
      this.$options.methods.queryTable.bind(this)();
      /*
      *查询
      */
      this.$bus.$on("query",(text)=>{
        this.queryForm.text = text;
        this.$options.methods.queryTable.bind(this)();
      })
    }
  }
</script>